<template>
  <div class="_content" style="padding: 0 20px">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <h4>项目搭建原因</h4>
        </template>
        <div>工作之余，为不使编码能力生疏，以及学习更多的知识，因而搭建这个项目，用以学习并记录所学到的知识；</div>
        <div>因而，在这个项目中会缺失很多正常的项目所需要的东西，以及多一些没什么用的东西；</div>
        <div>本意是为了学习而开发，所以业务逻辑没那么复杂；且功能都偏向学习，以及记录。</div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <h4>应用技术说明</h4>
        </template>
        <div>前端使用vue cli3模板搭建，vue版本为2.6（后续会进行vue3的学习），ui框架为element，并对element进行了部分二次封装</div>
        <div>后端使用spring cloud框架，其中使用OpenFeign进行不同模块之间通讯，redis发布订阅模式储存访问log，Swagger进行接口管理</div>
        <div>使用SHA-256进行密码加密，JWT实现token验证</div>
        <div>使用mybatis plus实现数据持久化</div>
        <div>数据库mysql8，并使用pdm进行数据库设计管理</div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <h4>组件封装说明（基于ElementUI）</h4>
        </template>
        <div>1.固化了一部分参数配置，不用每次都写入参数；如input number设置了默认的最大最小值，select设置可搜索可删除等；</div>
        <div>2.固化了一部分参数配置，不用每次都写入参数；</div>
        <div>3.封装了dialog/drawer,使其带有确认/取消按钮；以及dialog可最大化，可拖拽；</div>
        <div>4.封装了form；可根据参数生成表单及验证；</div>
        <div>5.封装了一个simple page组件，可根据参数生成增删改查方法，及table结果展示；</div>
        <div>6.以上~  详见api展示页...</div>
      </el-collapse-item>
    </el-collapse>
    <h4></h4>
    <h4></h4>
  </div>
</template>

<script>
  export default {
    name: "info-index",
    data(){
      return{
        activeNames: ['1','2','3']
      }
    },
    methods:{
      handleChange(v){

      }
    },
    mounted(){

    }
  }
</script>

<style scoped>
  ._content{
    color: #909399;
    font-size: 14px;
  }
  h4{
    color: #67C23A;
  }
</style>
